<template>
  <div class="qyfx-container">
      <div class="qyfx_title">
        安责险区域分布
      </div>
      <div class="qyfx_content">
        <div id="echart1" style="width:100%;height:100%"></div>
        <!-- <div id="echart2" style="width:100%;height:50%"></div> -->
      </div>
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <div class="block_title">
                {{dialogName}}
            </div>
            <div class="block_close" @click="closeOverLay">
              X
            </div>
            <div class="block_content_div">
                <div class="content_div" v-for="(item,index) in dialogData" :key="index">
                  <div class="content_num_unit" >
                      <div class="content_num" :style="{background:item.color}">
                      </div>
                      <div class="content_unit">
                          {{item.label+' : '+item.value+'家'}}
                      </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </van-overlay>
  </div>
</template>

<script>
import {getQyfx} from '../../api/api'

export default {
  name: 'index',
  components: {},
  props: {},
  data () {
    return {
      active:0,
      echarts1:null,
      echarts2:null,
      show:false,
      dialogData:
        [{label:'危化品监管',value:0,color:'#D55849'},
        {label:'非煤矿山监管',value:0,color:'#E1973B'},
        {label:'烟花爆竹监管',value:0,color:'#E57231'},
        {label:'医药企业监管',value:0,color:'#2FC9D0'},
        {label:'工贸行业监管',value:0,color:'#4395F9'},
        {label:'其它企业监管',value:0,color:'#959EA8'}],
      
      contentList1:[{
        num:123,
        unit:'家',
        desc:'应投保企业数'
      },{
        num:123,
        unit:'家',
        desc:'已投保企业数'
      },{
        num:123,
        unit:'人',
        desc:'被保险人员数'
      },{
        num:123,
        unit:'件',
        desc:'理赔案件数'
      },{
        num:123,
        unit:'家',
        desc:'签订服务合同数量'
      }],
      contentList2:[{
        num:123,
        unit:'家',
        desc:'保费(¥/元)'
      },{
        num:123,
        unit:'家',
        desc:'责任限额(¥/元)'
      },{
        num:123,
        unit:'人',
        desc:'赔付金额(¥/元)'
      },{
        num:123,
        unit:'件',
        desc:'事故预防费用(¥/元)'
      }],
      dataList:[],
      dialogName:'',
      ykzqys:0,
      wkzqys:0
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.initData()
  },
  methods: {
    async initData(){
      let res = await getQyfx();
      this.dataList = res.data.data;
      this.dataList = this.dataList.filter(item =>{
        return item.insuredNum != 0 && item.area != '合计';
      })
      console.log(res);
      this.initEcharts1();
      // this.initEcharts2(this.dataList[0]);
    },
    closeOverLay(){
      this.show = false
    },
    initEcharts1(){
      let self = this;
      this.echarts1 = this.$echarts.init(document.getElementById('echart1'));
      var xdata = [];
      var ydata = [];
      this.dataList.forEach((item,index)=>{
        // var d = {
        //   value: item.insuredNum,
        //   name:item.name,
        //   selected: index == 0
        // }
        xdata.push(item.insuredNum);
        ydata.push(item.name);
        // data.push(d);
      });
      // data = data.splice(0,5);
      var option = {
         grid:{
            left:70
            // right:20,
            // top:20,
            // bottom:20
          },
         color:['#319BFE'],
         xAxis: {
            position: 'top',
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ydata
          },
          series: [{
              name: '企业数',
              type: 'bar',
              barWidth:10,
              data: xdata,
              label: {
                show: true,
                position: 'right',
                color: 'rgba(0, 0, 0, 1)'
              }
              
          }]
      };
      this.echarts1.setOption(option);
      this.echarts1.on('click',function(params){
        console.log(params);
        let selectedData = self.dataList.find(item => {return item.name == params.name});
        console.log(selectedData);
        self.dialogName = params.name+'安责险类型分析';
        selectedData.indList.forEach(item => {
          // debugger
          let index = self.dialogData.findIndex(d => {
            return d.label == item.name
          })
          self.dialogData[index].value = item.ytbqys;
        })
        self.show = true;
      });
    },
    initEcharts2(data){
      let self = this;
      // debugger
      this.echarts2 = this.$echarts.init(document.getElementById('echart2'));
      // var xData = ['危化品', '非矿山', '烟花 爆竹', '医药企业', '工贸行业', '其它企业'];
      // var yData = [120, 200, 150, 80, 70, 110];
      var xData = [];
      var yData = [];
      data.indList.forEach(item => {
        xData.push(item.name)
        yData.push(item.ytbqys)
      });
      var title = data.name+'安责险企业类型分析';
      var option = {
          legend: {
              data: [title]
          },
          color:['#319BFE'],
          xAxis: {
              type: 'category',
              data: xData,
              axisLabel: {  
                interval:0,  
                rotate:30  
              }  
          },
          grid:{
            left:50
            // right:20,
            // top:20,
            // bottom:20
          },
          yAxis: {
              type: 'value',
              axisLine:{
                show:false
              },
               axisTick: {
                show: false
            },
              axisLabel:{
                color: 'rgba(0, 0, 0, 0.45)'
              }
          },
          series: [{
              name: title,
              data: yData,
              type: 'bar',
              barWidth:10
          }]
      };
      this.echarts2.setOption(option);
      this.echarts2.on('click',function(params){
        console.log(params);
        self.dialogName = data.name + params.name;
        let ind = data.indList.find(item => {return item.name == params.name})
        self.contentList1[0].num = ind.ytbqys;
        self.contentList1[1].num = ind.yitbqys;
        self.contentList1[2].num = ind.bbxrys;
        self.contentList1[3].num = ind.lpajs;
        self.contentList1[4].num = ind.qdfwhtsl;

        self.contentList2[0].num = ind.bf;
        self.contentList2[1].num = ind.zrxe;
        self.contentList2[2].num = ind.pfje;
        self.contentList2[3].num = ind.sgyffy;

        self.ykzqys = ind.ykzfwjs;
        self.wkzqys = ind.sgyffwcs;
        self.show = true;
      });
    }
  }
}
</script>

<style scoped lang="less">
.van-overlay{
  background: none;
}
.qyfx-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  .qyfx_title{
    height: 22px;
    font-size: 16px;
    font-weight: bold;
    color: #494C5B;
    line-height: 22px;
  }
  .qyfx_content{
    flex: 1;
    background: #fff;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 65%;
    // height: 120px;
    background-color: rgba(0, 0, 0, 0.72);
    position: relative;
    padding: 10px;
    .block_title{
      // height: 30px;
      font-size: 15px;
      font-weight: 500;
      color: #FFFFFF;
      // line-height: 22px;
      letter-spacing: 1px;
      padding-left: 5px;
      border-left: 3px solid #4395F9;
    }
    .block_close{
      width: 15px;
      height: 15px;
      font-size: 12px;
      font-weight: bold;
      background: #FFFFFF;
      border-radius: 50% 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333;
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .block_content_div{
      // background: #F5FAFD;
      // border: 1px solid #D5EBFB;
      display: inline-block;
      margin-bottom: 10px;
      .content_div{
        display: flex;
        flex-direction: column;
        padding: 5px;
        // width: 50%;
        // float: left;
        box-sizing: border-box;
        .content_num_unit{
          display: flex;
          // flex-direction: column;
          color: #FFFFFF;
          letter-spacing: 1px;
          align-items: center;
          .content_num{
            width: .2rem;
            height: .2rem;
            border-radius: 50% 50%;
            margin-right: .2rem;
          }
          .content_unit{
            font-size: 14px;
          }
        }
        .content_num_unit_red{
          color: #E22323;
        }
        .content_desc{
          font-size: 12px;
        }
      }
    }
    .block_bottom_content_div{
      background: #F5FAFD;
      display: flex;
      flex-direction: column;
      // height: 20px;
      // line-height: 20px;
      .bottom_content{
        display: flex;
        padding: 5px 0;
        .bottom_content_label{
          font-size: 12px;
          width: 70%;
        }
        .bottom_content_value{
          width: 30%;
          text-align: right;
          font-size: 16px;
          letter-spacing: 1px;
          span{
            font-size: 10px;
          }
        }
      }
    }
  }
}
</style>